<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Example: TalkJS with Firebase Cloud Messaging notifications</title>

    <script>
      (function (t, a, l, k, j, s) {
        s = a.createElement("script");
        s.async = 1;
        s.src = "https://cdn.talkjs.com/talk.js";
        a.head.appendChild(s);
        k = t.Promise;
        t.Talk = {
          v: 3,
          ready: {
            then: function (f) {
              if (k)
                return new k(function (r, e) {
                  l.push([f, r, e]);
                });
              l.push([f]);
            },
            catch: function () {
              return k && new k();
            },
            c: l,
          },
        };
      })(window, document, []);
    </script>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/11.1.0/firebase-app-compat.js"></script>
    <!-- include only the Firebase features as you need -->
    <script
      defer
      src="/__/firebase/11.1.0/firebase-messaging-compat.js"
    ></script>

    <style media="screen">
      body {
        /* background: white; */
        color: rgba(0, 0, 0, 0.87);
        font-family: Roboto, Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      .load {
        color: #525252;
        text-align: center;
        font-size: 13px;
      }
      #requestToken {
        margin: 0px 0px 12px;
        padding: 8px 16px;
        border-radius: 4px;
        background: #007df9;
        color: white;
        border: none;
        cursor: pointer;
      }
      @media (max-width: 600px) {
        body {
          margin-top: 0;
          background: white;
          box-shadow: none;
        }
      }
    </style>

    <script>
      Talk.ready.then(function () {
        var me = new Talk.User({
          id: "sample_user_sebastian",
          name: "Sebastian",
          role: "default",
        });
        var other = new Talk.User({
          id: "sample_user_alice",
          name: "Alice",
          role: "default",
        });

        window.talkSession = new Talk.Session({
          appId: "<APP_ID>", // update this with your TalkJS app ID
          me: me,
        });

        var conversation = talkSession.getOrCreateConversation(
          "sample_conversation"
        );

        conversation.setParticipant(me);
        conversation.setParticipant(other);

        var chatbox = talkSession.createChatbox();

        chatbox.select(conversation);
        chatbox.mount(document.getElementById("talkjs-container"));
      });
    </script>
  </head>
  <body>
    <p class="load" id="load">Firebase SDK loading&hellip;</p>
    <p class="load" id="token"></p>

    <div style="display: flex; justify-content: center">
      <button id="requestToken">Request token</button>
    </div>

    <div id="talkjs-container" style="height: 700px"></div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const loadEl = document.querySelector("#load");
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        // // The Firebase SDK is initialized and available here!
        //
        // firebase.auth().onAuthStateChanged(user => { });
        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
        // firebase.firestore().doc('/foo/bar').get().then(() => { });
        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
        // firebase.messaging().requestPermission().then(() => { });
        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
        // firebase.analytics(); // call to activate
        // firebase.analytics().logEvent('tutorial_completed');
        // firebase.performance(); // call to activate
        //
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

        try {
          // Update this with the firebaseConfig object from your Firebase app
          let app = firebase.initializeApp({
            apiKey: "",
            authDomain: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
          });
          let features = [
            "auth",
            "database",
            "firestore",
            "functions",
            "messaging",
            "storage",
            "analytics",
            "remoteConfig",
            "performance",
          ].filter((feature) => typeof app[feature] === "function");
          loadEl.textContent = `Firebase SDK loaded with ${features.join(
            ", "
          )}`;
        } catch (e) {
          console.error(e);
          loadEl.textContent =
            "Error loading the Firebase SDK, check the console.";
        }

        const messaging = firebase.messaging(firebase.app());

        document
          .getElementById("requestToken")
          .addEventListener("click", () => {
            messaging
              .getToken({
                vapidKey: "<FIREBASE_PUBLIC_KEY>", // update this with your Firebase project public key
              })
              .then((token) => {
                window.talkSession.setPushRegistration({
                  provider: "fcm",
                  pushRegistrationId: token,
                });

                document.getElementById(
                  "token"
                ).textContent = `Got token: ${token.substring(0, 16)}...`;
              });
          });
      });
    </script>
  </body>
</html>
